<%-- 
    Document   : loginPage
    Created on : May 2, 2013, 9:49:02 PM
    Author     : DIEM PHUONG
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/xml" prefix="x" %>

<div>
    <h1>Log in or Create an account</h1>
</div>

<!-- Log in -->
<form action ="Controller" method="POST" onsubmit="return validateLogin()" id="login-form">
    <h3>Log in</h3>
    <div>
        <label class="required"><em>*</em>Username</label>
        <span><input type="text" name="txtUsername" value="" id="txtUsername"/></span>
    </div>
    <div>
        <label class="required"><em>*</em>Password</label>
        <span><input type="password" name="txtPassword" value="" /></span>
    </div>
    <div>
        <button type="submit" name="btnAction" value="login">Login</button>
    </div>
    <p class="required">* Required Fields</p>
    <font id="loginError" style="color: #FF0000; font-weight: bold">${requestScope.loginError}</font>
</form>

<!-- Create an account -->
<form action ="Controller" method="POST" onsubmit="return validateRegister(this)" id="form-validate">
    <h3>Create an account</h3>
    <div>
        <input type="hidden" name="success_url" value="">
        <input type="hidden" name="error_url" value="">
    </div>
    <div>
        <label class="required"><em>*</em>Username</label>
        <span><input type="text" name="txtUsernameReg" value="" id="txtUsernameReg" class="input-text required-entry" placeholder=" Username must be at least 6 characters." maxlength="20" onchange="username(this.value)"/></span>
        <font id="txtHint" style="color: red"> ${requestScope.username}</font>
        <font class="error" id="user" style="color: red"></font>
    </div>
    <div>
        <label class="required"><em>*</em>Password</label>
        <span><input type="password" name="txtPasswordReg" value="" id="txtPasswordReg" class="input-text required-entry validate-password" value="" maxlength="15" placeholder=" Password must be from 6 to 15 characters" /></span>
        <font class="error" id="pass" style="color: red"></font>
    </div>
    <div>
        <label class="required"><em>*</em>Confirm Password</label>
        <span><input type="password" name="txtConfirm" value="" id="txtConfirm" class="input-text required-entry validate-cpassword" /></span>
        <font class="error" id="confirm" style="color: red"></font>
    </div>
    <div>
        <label class="required"><em>*</em>Full name</label>
        <span><input type="text" name="txtFullname" value="" id="txtFullname" maxlength="50" class="input-text required-entry" placeholder=" There are no number or special character: @, # $ % v.v..."/></span>
        <font class="error" id="fullname" style="color: red"></font>
    </div>
    <div>
        <label class="required"><em>*</em>Email</label>
        <span><input type="text" name="txtEmail" value="" id="txtEmail" class="input-text validate-email required-entry" maxlength="50" placeholder=" Email address have the form ***@***.***" /></span>
        <font class="error" id="email" style="color: red"></font>
    </div>
    <div>
        <label>Address</label>
        <span><input type="text" name="txtAddress" value="" id="txtAddress" maxlength="50"/></span>
        <font class="error" id="address" style="color: red"></font>
    </div>
    <div>
        <label>Phone</label>
        <span><input type="text" name="txtPhone" value="" id="txtPhone" maxlength="11" placeholder=" Phone number include 8 to 11 digits" /></span>
        <font class="error" id="phone" style="color: red"></font>
    </div>
    <div>
        <label class="required"><em>*</em>Gender</label>
        <select name="selectGender">
            <option value="male">Male</option>
            <option value="female">Female</option>
        </select>
    </div>
    <div>
        <button  type="reset" name="btnAction">Reset</button>
        <button type="submit" title="Submit"  name="btnAction" value="Register" id="create-account-submit"><span><span>Submit</span></span></button>
    </div>
    <font alignt="center" style="color: #000066; font-weight: bold;">${requestScope.registSuccess}</font>
    <p class="required">* Required Fields</p>
</form>